<template>
<div>
  <h4 class="hot_title">热销推荐</h4>
    <ul class="hot">
      <router-link tag="li" :to="'/buyTicket/'+item.id" class="clearfix" v-for="item in hotList" :key="item.title">
        <div class="hot_img"><img :src="item.images" alt=""></div>
        <div class="hot_intro">
          <h4>{{item.title}}</h4>
          <p>{{item.content}}</p>
          <span>查看详情</span>
        </div>
      </router-link>
    </ul>
</div>
</template>

<script>
export default {
  props:["hotList"]
}
</script>

<style lang="less" scoped>
.hot_title{
    font-weight: normal;
    font-size: 14/16rem;
    padding-left: 10/16rem;
    background: #eee;
    line-height: 20/16rem
  }
  .hot{
    .hot_img{
      float: left;
      width: 32%;
      height: 100%;
      img{
        width: 100%;
        display: block;
        height: 100%;
      }
    }
    li{
      border-bottom: 1/16rem solid #eee;
      height: 90/16rem;
    }
    .hot_intro{
      float: left;
      width: 68%;
      padding:10/16rem;
      box-sizing: border-box;
      height: 100%;
      h4{
        font-weight: normal;
        margin-bottom: 5/16rem;
      }
      p{
        font-size: 14/16rem;
        color: #808080;
        margin-bottom: 10/16rem;
        overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
      }
      span{
        display: block;
        background: orange;
        width: 75/16rem;
        color: #fff;
        font-size: 14/16rem;
        text-align: center;
        border-radius: 3px;
        line-height: 22/16rem

      }
    }
    }
</style>